<template>
	<view class="content">
		<view class="resttime">
			<view class="resttime-tittle">支付剩余时间</view>
			<view class="resttime-time">29:30</view>
			<view class="need-pay">
				<view class="need-pay-text">实际支付金额</view>
				<view class="need-pay-price">￥200+300MGT</view>
			</view>
		</view>

		<view class="pay">
			<image class="pay-l" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixinzhifu%402x.png"></image>
			<view class="pay-text">微信支付</view>
			<image class="pay-r" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/zhifuxuanze%402x.png"></image>
		</view>
		
		<view class="confirm-pay" @tap="wxPay()">确认支付</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			/* goPayResult() {
				uni.navigateTo({
					url:'../goods-pay-result/goods-pay-result'
				})
			} */
			wxPay: function (e) {
			    var openId = "oUpF8uMuAJO_M2pxb1Q9zNjWeS6o";//小程序openid
			    var tradeNo = "85511613375";//商户订单号 
			    var amount = "0.01";//支付费用
			    var body = "支付测试";//
			    wx.request({//请求生成订单
			        url: '',
			        method: 'POST',
					data: {
						openId: openId,
						tradeNo: tradeNo,
						tradeType: 'JSAPI',
						amount: amount,
						body: body,
					},    //参数为键值对字符串
					header: {
						//设置参数内容类型为x-www-form-urlencoded
						"Accept": "*/*", 
						'Content-Type': 'application/json' //后台调起支付接口
				   },
					success: function (e) {
						var data = e.data.wxPayResponse;
						wx.requestPayment({//请求支付订单
				
							  'timeStamp': data.timeStamp.toString(),//
					
							  'nonceStr': data.nonceStr,//随机字符串
					
							  'package': data.package_wx,
					
							  'signType': 'MD5',
					
							  'paySign': data.sign,
					
							  success: function (event) {// success   
									wx.showToast({
									  title: '支付成功',
									  icon: 'success',
									  duration: 2000
									});
								//处理  业务逻辑
							  },
							  fail: function (error) { // fail   
									console.log("支付失败")
									wx.showToast({
									  title: '支付失败',
									  icon: 'none',
									  duration: 2000
									});
							  }
				
						})
				
					}
				
			})
				
		}
	}
}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.resttime {
		width: 100%;
		height: 127.5px;
		background: rgba(255, 255, 255, 1);
	}

	.resttime-tittle {
		width: 100%;
		height: 20px;
		padding-top: 25px;
		text-align: center;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 20px;
	}

	.resttime-time {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		height: 20px;
		line-height: 20px;
		text-align: center;
		padding-top: 3px;
		padding-bottom: 15px;
	}

	.need-pay {
		height: 45px;
		margin: 0 10px;
		border-top: 1px solid rgba(238, 238, 238, 1);
		display: flex;
		flex-wrap: wrap;
	}

	.need-pay-text {
		height: 45px;
		line-height: 45px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.need-pay-price {
		height: 45px;
		line-height: 45px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 97, 14, 1);
		position: absolute;
		right: 10px;
	}

	.pay {
		width: 100%;
		height: 50px;
		margin-top: 10px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		flex-wrap: wrap;
	}

	.pay-l {
		width: 20px;
		height: 17.5px;
		margin: 16.5px 12px 16px 16px;
	}
	
	.pay-r {
		width: 20px;
		height: 17.5px;
		position: absolute;
		right: 16px;
		top: 152px;
	}

	.pay-text {
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
	
	.confirm-pay {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background:rgba(254,67,56,1);
		color: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0;
	}
</style>
